import React,{Component} from "react";
import { View, Text, Image, StyleSheet, TouchableWithoutFeedback, FlatList, TextInput } from "react-native";
import NavBar from '../../widget/customerHeader'
import * as RootNavigation from '../../../App'
import CreateGroupView from "../message/createGroupView";
import  LinearGradient from 'react-native-linear-gradient';

class Message_page extends Component{
  constructor(props) {
    super(props);
    this.popView=null,
    this.state={
      dataList:[{
        value:1,
        label:1
      },{
        value:2,
        label:2
      },{
        value:3,
        label:3
      },{
        value:4,
        label:4
      }],
      groupMemberList:[
        {
          value:3,
          label:3
        },{
          value:4,
          label:4
        }
      ],
      searchKey:''
    }
  }

  cell_Click(info){
    console.log(info)
    if(info.item.value==1){
      RootNavigation.navigate('FansList',{})
    }
    else if(info.item.value==2||info.item.value==3){
      RootNavigation.navigate('CommentList',{})
    }
    else {
      RootNavigation.navigate('SystemMessageList',{})
    }

  }

  open(){
    this.popView.show({
      content:this._renderGroupMember()
    },()=>{

    })
  }

  _renderGroupMember(){
    return (
      <View style={{flex:1,paddingBottom:34}}>
        <View style={styles.searchBar}>
          <Image style={styles.searchIcon} source={require('../../img/search_icon.png')}></Image>
          <TextInput style={{marginLeft:6,flex:1}} defaultValue={this.state.searchKey} placeholder={'搜一搜'}></TextInput>
        </View>
        <FlatList
          data={this.state.groupMemberList}
          renderItem={this._renderGroupItem}
          keyExtractor={(item)=>item.value}>
        </FlatList>
        <LinearGradient colors={['#e79c58','#f8da85']} start={{x:0,y:1}} style={styles.joinGroupBtn}>
          <Text style={styles.joinGroupTitle}>发起聊天</Text>
        </LinearGradient>
      </View>
    )
  }

  _renderGroupItem=(info)=>{
    return (
      <View style={styles.groupCell}>
        <Image style={styles.groupPortait} source={{uri:'https://cdn.uviewui.com/uview/swiper/swiper1.png'}}></Image>
        <Text style={styles.groupName}>兔子爱吃胡萝卜</Text>
        <Image style={styles.selectIcon} source={require('../../img/selected_no_icon.png')}></Image>
        <View style={styles.line}></View>
      </View>
    )
  }


  _renderItem=(info)=>{
    return(
      <TouchableWithoutFeedback onPress={()=>{this.cell_Click(info)}}>
        <View style={styles.cell}>
          <Image style={styles.portrait} source={require('../../img/system_message_icon.png')}></Image>
          <View style={styles.info}>
            <View style={styles.flex}>
              <Text style={styles.name}>粉丝</Text>
              <Text style={{color:'#BCBCBC',fontSize:11}}>11-11</Text>
            </View>
            <Text style={styles.message}>一叶知秋关注了你</Text>
            <View style={styles.dot}>
              <Text style={styles.num}>2</Text>
            </View>
          </View>
        </View>
      </TouchableWithoutFeedback>
    )
  }
  render(){
    return (
      <View style={{flex:1,backgroundColor:'#fff'}}>
        <NavBar canBack={false} showLine={true} title={'消息'}>
          <Text style={styles.createTitle} onPress={this.open.bind(this)}>创建群聊</Text>
        </NavBar>
        <FlatList data={this.state.dataList} renderItem={this._renderItem} keyExtractor={item => item.value}></FlatList>
        <CreateGroupView ref={(ref)=>this.popView=ref}></CreateGroupView>
      </View>
    )
  }
}
export default module=Message_page

const styles=StyleSheet.create({
  createTitle:{
    color:'#000000',
    fontSize:14,
    marginRight:15
  },
  cell:{
    position: 'relative',
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    height:73,
    paddingHorizontal:15
  },
  portrait:{
    width:45,
    height:45
  },
  info:{
    flex:1,
    marginLeft:9
  },
  flex:{
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  name:{
    color:'#000000',
    fontSize: 15
  },
  message:{
    color:'#9B9B9B',
    fontSize:13,
    marginTop:8
  },
  dot:{
    position:'absolute',
    width: 16,
    height:16,
    borderRadius:8,
    backgroundColor:'#FC3D3D',
    bottom:0,
    right:0,
  },
  num:{
    color:'#fff',
    textAlign:'center',
    fontSize:11,
    flex:1
  },
  groupCell:{
    height:73,
    backgroundColor:'#fff',
    paddingLeft:15,
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center'
  },
  groupPortait:{
    width:40,
    height:40,
    borderRadius: 20
  },
  selectIcon:{
    width:15,
    height:15,
    marginRight: 15
  },
  groupName:{
    color:'#000000',
    fontSize:15,
    flex:1,
    marginLeft: 14
  },
  searchBar:{
    height:30,
    borderRadius:15,
    backgroundColor:'#F6F7F9',
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    marginHorizontal:15
  },
  searchIcon:{
    width:13,
    height:13,
    marginLeft:14
  },
  line:{
    position:'absolute',
    right: 0,
    left:15,
    height:1,
    bottom: 0,
    backgroundColor:'#F6F7F9'
  },
  joinGroupBtn:{
    height:44,
    borderRadius:22,
    marginHorizontal: 24,
  },
  joinGroupTitle:{
    flex:1,
    textAlign: 'center',
    lineHeight:44,
    fontSize:15,
    fontWeight:'500',
    color:'#fff'
  }
})
